<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <style>
        body {
            margin:0;
            padding:0;
            font-family:sans-serif;
            background:#2C2255;
            background:url(../image/111.jpg);
            background-repeat: no-repeat;
            background-size:100%;
            font-size: 20px;
            font-family:STXingkai;
            color: #59ec0a;
        }
        a{
            text-decoration:none;
        }
        button{
            margin:10px;
        }
        th{
            width:300px;

        }
        td{
            width:200px;
            height:80px;
        }
    </style>
</head>
<body>
<h1>员工信息添加页面</h1>
<form id="emp-form">
    <div class="form-group">
        <label for="employeeName">员工名称:</label>
        <input type="text" class="form-control" id="employeeName" name="employeeName">
    </div>

    <div class="form-group">
        <label for="employeeIdCard">身份证信息：</label>
        <input type="number" class="form-control"  id="employeeIdCard" name="employeeIdCard">
    </div>

    <div class="form-group">
        <label for="employeePhoneNumer">手机号码：</label>
        <input type="number" class="form-control" id="employeePhoneNumer" name="employeePhoneNumer">
    </div>

    <div class="form-group">
        员工性别：
        <label class="radio-inline">
            <input type="radio" name="employeeSex" id="optionsRadios3" value="1" checked> 男
        </label>
        <label class="radio-inline">
            <input type="radio" name="employeeSex" id="optionsRadios4"  value="2"> 女
        </label>
    </div>


    <div class="form-group">
        <label class="col-sm-3 control-label">职业选择：</label>
        <div class="col-sm-4">
            <select class="selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3" name="jobList" id="jobList">
                <option v-for="job in jobList" v-text="job.jobTitle" :value="job.jobId"></option>

            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="employeeAddress">家庭住址a：</label>
        <input type="text" class="form-control" id="employeeAddress" name="employeeAddress">
    </div>
    <button type="button" @click="addEmp()" id="sub-btn" class="btn btn-primary">提交</button>
    <button type="reset" class="btn btn-primary">重置</button>
</form>


<script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
<script src="../bootstrap/js/bootstrap.js" ></script>
<script src="../vue/vue.js" charset="utf-8"></script>
<script>
    $(function(){
        function selJob () {
            let map = [];
            $.ajax({
                type:"post",
                url:"../JobController/selJob",
                data:"",
                async:false,
                dataType:"json",
                success:function (json) {
                    map = json;
                }
            })
            return map;
        }

        let map = selJob();
        console.log(map)
        bookTabVue = new Vue({
            el: '#emp-form',
            data: {
                jobList: map.list
            },
            methods: {
                addEmp:function () {
                    let emp=$("#emp-form").serialize();
                    let value2=$('#jobList').val();
                    let value=value2.join(',');

                    $.ajax({
                        type:"post",
                        url:"../EmployeeController/addEmp",
                        data:emp+"&value="+value,
                        dataType:"json",
                        success:function (json) {
                            alert(json.msg);
                            if (json.msg=="添加成功!"){
                                window.location.href="employee.html";
                            }
                        }
                    })
                }

            }
        });


    })


</script>
</body>
</html>